import * as React from 'react';
import { Table, Button, Divider, Modal } from 'antd';
import { Dialog, Props } from './dialog';

const confirm = Modal.confirm;

const dataSource = [{
    id: 1,
    title: '邮政储蓄',
    code: 'post'
}, {
    id: 2,
    title: '顺丰快递',
    code: 'SF_post'
}];

const schemaForm = {
    type: "object",
    required: ["title"],
    properties: {
        title: { type: "string", title: "Title", default: "", placeholder: "请输入名称" },
        code: { type: "string", title: "Code", default: "", placeholder: "请输入code" }
    }
};

class ExpressPage extends React.Component {
    public constructor(props: any) {
        super(props);
        this.showPop = this.showPop.bind(this);
        this.submitInfo = this.submitInfo.bind(this);
        this.state = {
            visible: false,
            schema: schemaForm,
            formData: {}
        }
    }
    public showPop() {
        this.setState({
            visible: true
        })
    }
    public editInfo(record: any) {
        this.showPop();
        this.setState({
            formData: record
        })
    }
    public submitInfo(data: any) {
        console.log(data.formData, '提交信息')
    }
    public showDeleteConfirm() {
        confirm({
            title: '确定要删除吗？',
            content: '删除之后将不可见',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    public render() {
        let { visible, schema } = this.state as Props;
        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            id: 'id'
        }, {
            title: 'CODE',
            dataIndex: 'code',
            id: 'code'
        }, {
            title: '名称',
            dataIndex: 'title',
            id: 'title'
        }, {
            title: '操作',
            render: (text: string, record: any) => (
                <span>
                    <a href="javascript:;" onClick={this.editInfo.bind(this, record)}>编辑</a>
                    <Divider type="vertical" />
                    <a href="javascript:;" onClick={this.showDeleteConfirm}>删除</a>
                </span>
            )
        }
        ];
        const { formData } = this.state as any;
        return (
            <div>
                <Button type="primary" onClick={this.showPop}>添加</Button>
                <Table dataSource={dataSource} columns={columns} rowKey='id' />
                <Dialog visible={visible} schema={schema} formData={formData} submitInfo={this.submitInfo} />
            </div>
        )
    }
}

export default ExpressPage;